<template>
  <view class="album_box">
    <scroll-view
      class="album-scroll-view"
      scroll-y
      @scrolltolower="handleToLower"
      lower-threshold="100"
    >
      <view class="swiper-content">
        <!-- swiper 默认的高度150px -->
        <!-- swiper-item 标签宽高默认值是100% -->
        <!-- image 默认的宽度320px 高度240px  uni.scss重置了宽度100% -->

        <swiper class="swiper" autoplay indicator-dots circular>
          <swiper-item v-for="item in swiperInfoList" :key="item.id">
            <image class="swiper-img" mode="widthFix" :src="item.image_src">
            </image>
          </swiper-item>
        </swiper>
      </view>
      <view class="album-content" v-for="item in albumInfoList" :key="item.id">
        <navigator :url="item.url">
          <my-albumItem :albumItemObj="item"></my-albumItem>
        </navigator>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import albumItem from "@/components/public/album_item/index";
export default {
  components: {
    "my-albumItem": albumItem,
  },
  data() {
    return {
      swiperInfoList: [],
      albumInfoList: [],
      hasMore: true,
      isLoading: false,
      subPkgRoot: "/subpkg",
    };
  },
  methods: {
    init() {
      this.getSwiperList();
      this.getAlbumInfoList();
    },
    async getSwiperList() {
      const { data: res } = await uni.$http.get(
        "/api/public/v1/home/swiperdata"
      );
      if (res.meta.status != 200) {
        return;
      }
      this.swiperInfoList = res.message;
    },
    async getAlbumInfoList() {
      if (this.isLoading) return;
      uni.showLoading({
        title: "正在加载...",
      });
      this.isLoading = true;
      setTimeout(async () => {
        await uni.hideLoading();
        var curTotal = this.albumInfoList.length;
        // 每次从上一次末尾添加，每次添加7个，35是最大值
        for (var i = curTotal; i < curTotal + 7 && i < 35; i++) {
          this.albumInfoList.push({
            id: i,
            title: "【独家】熊出没·狂野大陆",
            descript: "新年新气象，过年看光头强，“熊强组合”欢乐无限财富滚滚来",
            imgUrl: "/static/image/3.jpg",
            url: `${this.subPkgRoot}/album_details/index?id=${i}`,
          });
        }
        this.isLoading = false;
        if (i >= 35) {
          this.hasMore = false; // 表示没有更多了
        }
      }, 500);
    },
    handleToLower() {
      // 由更多数据并且没有再加载效果中，才能再次申请数据
      if (this.hasMore) {
        this.getAlbumInfoList();
        return;
      } else {
        uni.$showMsg();
      }
      // 只有未再加载中才会有相关的提示
      // if (this.notLoading) {
      //   uni.$showMsg();
      // }
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.album-scroll-view {
  height: calc(100vh - 36px);
  .swiper-content {
    .swiper {
      height: calc(750rpx / (750 / 340));
      .swiper-img {
        height: 100%;
      }
    }
  }
}
</style>
